<!-- 分类页面 -->
<template>
  <div>
    <div v-if="myData.length <= 0">
      <van-empty
        image="http://106.14.223.232:9000/disk2/queshengyeicon_gouwuche.png"
        description="请添加物品到购物车"
      />
    </div>
    <div v-if="myData.length > 0">
      <van-toast id="van-toast" />
      <div v-for="item in myData" :key="item.id">
        <div class="cartCkeckbox">
          <van-checkbox
            :value="item.selected"
            checked-color="#ff0000"
            @change="singleChange(item.id)"
          ></van-checkbox>
        </div>
        <div class="cartGoods">
          <van-swipe-cell :right-width="65">
            <van-card
              :num="item.num"
              :tag="item.tag"
              :price="item.price"
              :desc="item.desc"
              :title="item.title"
              :thumb="item.imageURL"
            >
              <view slot="footer">
                <van-button size="mini" @click="subClick(item.id)"
                  >-</van-button
                >
                <van-button size="mini" @click="addClick(item.id)"
                  >+</van-button
                >
              </view>
            </van-card>
            <view slot="right" style="height: 100%"
              ><van-button
                type="danger"
                square
                @click="singleDel(item.id)"
                class="delete-button"
                >删除</van-button
              ></view
            >
          </van-swipe-cell>
        </div>
      </div>
      <van-submit-bar
        :price="totalMoney"
        button-text="提交订单"
        @submit="onClickButton"
        :tip="true"
      >
        <van-checkbox
          :value="checked"
          checked-color="#ff0000"
          @change="onChange"
        >
          全选
        </van-checkbox>
        &nbsp;
        <a href="#" @click="del()" disabled>删除</a>
        <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>
      </van-submit-bar>
    </div>
    <van-dialog
      id="van-dialog"
      :show="showDialog"
      theme="round-button"
      showCancelButton="true"
    />
  </div>
</template>

<script>
import Toast from "@vant/weapp/dist/toast/toast";
import Dialog from "@vant/weapp/dist/dialog/dialog";

export default {
  //需要引入的组件
  components: {},
  props: {},
  //存放数据
  data() {
    return {
      showDialog: false,
      myData: [
        {
          id: 1,
          num: 2,
          tag: "测试1",
          title: "测试1",
          price: 20.99,
          desc: "测试1",
          selected: false,
          imageURL:
            "https://img14.360buyimg.com/n5/jfs/t1/210772/21/14957/69579/61d40eb1E28262440/07436ac2d632c454.jpg.avif",
        },
        {
          id: 2,
          num: 2,
          tag: "测试2",
          title: "测试2",
          price: 20.99,
          desc: "测试2",
          selected: false,
          imageURL:
            "https://img14.360buyimg.com/n5/jfs/t1/210772/21/14957/69579/61d40eb1E28262440/07436ac2d632c454.jpg.avif",
        },
        {
          id: 3,
          num: 2,
          tag: "测试3",
          title: "测试3",
          price: 20.99,
          desc: "测试3",
          selected: false,
          imageURL:
            "https://img14.360buyimg.com/n5/jfs/t1/210772/21/14957/69579/61d40eb1E28262440/07436ac2d632c454.jpg.avif",
        },
      ],
      // totalMoney: 0,
      checked: false,
    };
  },
  //计算属性
  computed: {
    totalMoney() {
      var sum = 0;
      for (var i = 0; i < this.myData.length; i++) {
        if (this.myData[i].selected) {
          sum = sum + this.myData[i].price * this.myData[i].num * 100;
        }
      }
      return sum;
    },
  },

  mounted: {},

  methods: {
    subClick(id) {
      for (var i = 0; i < this.myData.length; i++) {
        if (this.myData[i].id === id) {
          if (this.myData[i].num <= 1) {
            Toast("最少存在一件，否则请删除");
          } else {
            this.myData[i].num--;
          }
        }
      }
    },
    addClick(id) {
      for (var i = 0; i < this.myData.length; i++) {
        if (this.myData[i].id === id) {
          this.myData[i].num++;
        }
      }
    },
    onChange() {
      this.checked = !this.checked;
      for (var i = 0; i < this.myData.length; i++) {
        if (this.checked) {
          this.myData[i].selected = true;
        } else {
          this.myData[i].selected = false;
        }
      }
    },
    singleChange(id) {
      for (var i = 0; i < this.myData.length; i++) {
        if (this.myData[i].id === id) {
          this.myData[i].selected = !this.myData[i].selected;
        }
      }
    },
    del() {
      if (!this.checked) {
        Toast("请选择全部商品");
        return;
      }
      this.showDialog = true;
      // this.myData.splice(0);
      const beforeClose = (action) =>
        new Promise((resolve) => {
          setTimeout(() => {
            if (action === "confirm") {
              resolve(true);
            } else {
              // 拦截取消操作
              resolve(true);
            }
          }, 1000);
        });
      Dialog.confirm({
        title: "提示信息",
        message: "是否清空购物车",
        beforeClose,
      })
        .then(() => {
          // on confirm
          this.myData.splice(0);
          this.showDialog = false;
        })
        .catch(() => {
          // on cancel
          this.showDialog = false;
        });
    },
    singleDel(id) {
      for (var i = 0; i < this.myData.length; i++) {
        if (this.myData[i].id === id) {
          this.myData.splice(i, 1);
        }
      }
      console.log("this.myData", this.myData);
    },
  },
};
</script>
<style>
.cartGoods {
  display: inline;
  float: left;
  width: 90%;
}
.cartCkeckbox {
  float: left;
}
.delete-button {
  height: 100%;
}
</style>